import React from 'react'
import {BrowserRouter,Navigate,useRoutes} from 'react-router'
const Login=React.lazy(()=>import('../pages/Login'))
const NoteClass=React.lazy(()=>import('../pages/NoteClass'))
const Register=React.lazy(()=>import('../pages/Register'))
const NoteList=React.lazy(()=>import('../pages/NoteList'))
const NoteDetail=React.lazy(()=>import('../pages/NoteDetail'))

const routers=[
    {
        path:'/',
        element:<Navigate to="/noteClass" />//表示访问跟组件时，自动跳转至/noteClass页面
    },
    {
        path:'/login',
        element:<Login />
    },
    {
        path:'/noteClass',
        element:<NoteClass />
    },
    {
        path:'/register',
        element:<Register />
    },
    {
        path:'/noteList',
        element:<NoteList />
    },
    {
        path:'/noteDetail',
        element:<NoteDetail />
    }
]
function WrapperRouters(){
    //useRotes钩子只能用在路由组件中，不能单独抛出
    // 直接return <BrowserRouter>{ele}</BrowserRouter>不行，需要用路由组件包裹后返回
    let ele=useRoutes(routers)
    //返回<Routes></Routes>内包含如<Route path="/" element={<Navigate to="/noteClass" />} />的元素
    return ele


}
export default function WrapperRouter(){
    return (
        <BrowserRouter>
            <WrapperRouters/>
        </BrowserRouter>

    )
}
            // //声明路由模式为history模式
        // <BrowserRouter>
        //   {/* 路由出口，所有路由组件都会渲染到这里 */}
        //   <Routes>
        //     {/* 路由配置项 */}
        //     {/* Navigate 重定向 */}
        //     <Route path="/" element={<Navigate to="/noteClass" />} />
        //     <Route path="/login" element={<Login />} />
        //   </Routes>
        // </BrowserRouter>
